<!--@jQuery-->
<div id="vectorMapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div style="text-align:center; height:40px; margin-top:10px">
    Choose a Marker Type:
    <div id="markerTypeSelectBoxContainer" style="display:inline-block; vertical-align:middle"></div>
</div>
<!--/@jQuery-->
<!--@Knockout-->
<div style="height:500px; max-width:800px; margin: 0 auto" data-bind="dxVectorMap: vectorMapCfg"></div>
<div style="text-align:center; height:40px; margin-top:10px">
    Choose a Marker Type:
    <div style="display:inline-block; vertical-align:middle" data-bind="dxSelectBox: markerTypeSelectBoxCfg"></div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="vectorMapController">
    <div style="height:500px; max-width:800px; margin: 0 auto" dx-vector-map="vectorMapCfg"></div>
    <div style="text-align:center; height:40px; margin-top:10px">
        Choose a Marker Type:
        <div style="display:inline-block; vertical-align:middle" dx-select-box="markerTypeSelectBoxCfg"></div>
    </div>  
</div>
<!--/@AngularJS-->